Vertical Text with CSS
CSS allows text to be displayed vertically, from top to bottom, using the writing-mode property. This is useful for multilingual layouts, decorative text, or certain design styles.
writing-mode– Controls the direction of text flow.vertical-rl: Vertical text flowing from top to bottom, right to left.vertical-lr: Vertical text flowing from top to bottom, left to right.horizontal-tb: Default horizontal text flow (top to bottom, left to right).
text-orientation– Adjusts the orientation of individual characters in vertical text.mixed(default) allows characters to rotate naturally.uprightkeeps characters upright for readability.
transform– Optional for rotating text withrotate()if specific visual effects are desired.
In this example, the text flows vertically from top to bottom, and each character remains upright for readability. Adjust writing-mode and text-orientation for different vertical layouts.
Use vertical text sparingly for headings, labels, or decorative purposes.
Ensure readability by combining
writing-mode: vertical-rl;withtext-orientation: upright;.Check alignment, line spacing, and container width to avoid clipped text.
Test across browsers, as support for vertical writing may vary in older versions.
Combine with responsive design to ensure vertical text works on different screen sizes.